<template>
	<view class="circlepage">
		<view class="backimg">
			<view class="mine_box">
				<image :src="info.avatar" class="mine_img"></image>
				<!-- <image :src="photo_cdn+userInfo.avatar" class="mine_img"></image> -->				
			</view>
		</view>
		<view class="circle">
			<view id="moments">
				<view class="moments__post" v-for="(post,index) in friend_list" :key="index" :id="'post-'+index"
					@tap="cardposttap(post)">
					<view class="post-left">
						<image class="post_header" @tap.stop="toinfo(post)" :src="post.avatar"></image>
					</view>
					<view class="post_right" @tap.stop="tocomment(post)">
						<text @tap.stop="toinfo(post)" class="post-username">{{post.nickname}}</text>
						<view id="paragraph" class="paragraph">{{post.content}}</view>
						<!-- 相册 -->
						<view class="thumbnails" v-if="post.imglist">
							<view :class="post.imglist.length == 1?'my-gallery':'thumbnail'"
								v-for="(image, index_images) in post.imglist" :key="index_images">
								<image class="gallery_img" lazy-load mode="aspectFill" :src="photo_cdn+image"
									:data-src="photo_cdn+image" @tap.stop="previewImage(post.imglist,index_images)">
								</image>
							</view>
						</view>
						<view class="upvote">
							<view class="pubtime">{{post.create_time | formatMsgTime}}</view>
							<view class="upvote_view flexc" @tap.stop="taggle_operate(post.id)"
								:class="{actives:operate_post_id==post.id}">
								<view class="upvote_btn_par flexc">
									<view class="upvote_btn" hover-class="hover_item">
										<view class="upvote_dot"></view>
										<view class="upvote_dot"></view>
									</view>
								</view>

								<!-- 展开按钮 -->
								<view class="toolbar">
									<view class="flex ali-c toolbar_item">
										<view class="like" @tap.stop="tolike(post)">
											<image class="like_img"
												:src="post.islike===0?photo_cdn+'zpupload/20231028/bcfad1499723fb8a1f.png':photo_cdn+'zpupload/20231028/1602eff92ec3ecd755.png'">
											</image>
										</view>
										<view class="quanum">{{post.like_num}}</view>
									</view>
									<view class="flex ali-c toolbar_item">
										<view class="comment">
											<image class="comment_img"
												:src="photo_cdn+'zpupload/20231028/225ff541666c6e9cda.png'"></image>
										</view>
										<view class="quanum" @tap.stop="toinput(post,index)">评论</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 赞／评论区 -->
						<view v-if="post.comment_list">
							<view class="review_area" v-if="post.comment_list.length">
								<!-- 发表的评论 -->								
								<view class="review" v-if="comment.reply_id==0"
									v-for="(comment,comment_index) in post.comment_list" :key="comment_index"
									:hover-class="userInfo.id==comment.user_id?'hover_none':'hover_item'"
									@click.stop="toinput(post,index,comment)" 
									@touchstart="gotouchstart(comment,post)"
									@touchmove="gotouchmove" 
									@touchend="gotouchend"
								>
									<view class="review_name" v-show="comment.nickname">{{comment.nickname}}:</view>
									<view class="review_text">{{comment.content}}</view>
								</view>
								<!-- 发表的评论 end-->

								<!-- 回复的评论 -->
								<view class="review" v-if="comment.reply_id!=0"
									v-for="(comment,comment_index) in post.comment_list" :key="comment_index"
									:hover-class="userInfo.id==comment.reply_user_id?'hover_none':'hover_item'"
									@tap.stop="toinput(post,index,comment)" 
									@touchstart="gotouchstart(comment,post)"
									@touchmove="gotouchmove" 
									@touchend="gotouchend"
								>									
									<view class="review_name" v-show="comment.nickname">{{comment.reply_nickname}}
									</view>
									<view class="reply_text">回复</view>
									<view class="review_name" v-show="comment.reply_nickname">{{comment.nickname}}:
									</view>
									<view class="review_text">{{comment.content}}</view>
								</view>
								<!-- 回复的评论 end-->
							</view>
						</view>
					</view>
					<!-- 结束 post -->
				</view>
			</view>
		</view>

		<!-- 输入框 -->
		<view class="foot" v-show="showInput">
			<view class="footer">
				<view class="footer-center">
					<input class="input-text" type="text" @confirm="send_comment" v-model="inputValue" :focus="focus"
						:placeholder="input_placeholder" cursor-spacing="10"></input>
				</view>
				<view class="footer-right">
					<view id='msg-type' class="send-comment" @tap="send_comment()">发送</view>
				</view>
			</view>
		</view>
		<empty v-if="friend_list.length==0"></empty>
		<uni-popup ref="circle_popup" @change="changcircle_popup" type="bottom" :mask-click="true" :animation="true">
			<view class="circle_del">
				<view class="copy_btn" @tap="tocopy">复制</view>
				<view @tap="del" class="circle_delbtn" v-if="userInfo.id==deluser_id || userInfo.id==pouser_id">删除
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	import {
		getUserinfo
	} from "@/utils/api/api.js";
	let {
		photo_cdn
	} = config.baseUrl;
	import {
		joinCircle,
		getFriendList,
		submitComment,
		like,
		del,
		replyComment
	} from "@/utils/api/user.js";
	var timeOutEvent = 0; //定时器 
	export default {
		data() {
			return {
				cirindex: 1,
				keywords: '',
				photo_cdn,
				page: 0,
				pagetwo: 0,
				statusBarHeight: 0, //通知栏高度

				type: '',
				friend_list: [], //朋友圈列表
				isshowall: false,
				operate_post_id: "", //展开评论操作的帖子id

				province_id: '', //省级地址
				is_reply: false, //判断是回复还是评论
				showInput: false, //弹出输入框
				inputValue: '', //输入的文字
				focus: false, //是否自动聚焦输入框
				input_placeholder: '', //输入框提示文字
				comment_index: '', //评论索引
				index: '', //朋友圈索引
				post_id: '', //朋友圈id
				reply_id: '', //回复评论id
				reply_nickname: '', //要回复的人的名字
				pouser_id: '', //发朋友圈的人的id
				userInfo: {},
				info:{
					status: {
						value: 0,
						chinese: '加载中'
					}
				},
				deluser_id: '', //要删除的评论的评论人id
				del_id: '', //要删除的id
				cpoy_text: '', //要复制的文本
				is_press:false//是否长按
			}
		},
		onLoad(option) {
			this.imuser_id = option.imuser_id ? option.imuser_id : '';
			this.friend_list = [];
			this.page = 0;
			this.getFriendListfun();
			this.ws.pageFun(this.pageDataLoad, this);
		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (!token) {
				// #ifdef MP-WEIXIN
				setTimeout(() => {
					this.isshowlogin = true;
				}, 1500)
				// #endif
			} else {
				this.getUserinfofun();
			}									
			
		},
		onUnload() {
			uni.removeStorageSync('user_id')
		},
		onReachBottom() { //监听上拉触底事件
			if (!this.isshowall) {
				this.getFriendListfun();
			} else {
				this.$api.msg('没有更多了~');
			}
		},
		onPullDownRefresh() { //监听下拉刷新动作
			this.page = 0;
			this.isshowall = false;
			this.friend_list = [];
			this.getFriendListfun();
			setTimeout(() => {
				uni.stopPullDownRefresh(); //结束下拉刷新
			}, 2000)

		},
		
		methods: {
			pageDataLoad: function(refresh = false) {
				this.ws.send({
					c: 'User',
					a: 'infoDetail',
					data: {
						'method': 'get',
						'type': 'user',
						'id': this.imuser_id,
						'requestor': this.userInfo.id,
						'refresh': refresh,
						'notitle': 'friend'
					}
				})
			},
			cardposttap() {
				this.operate_post_id = "";
			},
			//展开评论
			taggle_operate(id) {
				if (this.operate_post_id == id) {
					this.operate_post_id = "";
				} else {
					this.operate_post_id = id;
				}
			},
			//调起输入框
			toinput(post, index, comment) {
				if(this.is_press==true){
					return false;
				}
				if (comment) {
					if (this.userInfo.id == comment.user_id || this.userInfo.id == comment.reply_user_id) {
						return false;
					}
					this.is_reply = true;
				} else {

				}
				this.showInput = true;
				this.operate_post_id = "";
				this.focus = true;
				this.index = index;
				this.post_id = post.id;
				console.log(index, 'index')
				if (this.is_reply) { //回复评论
					this.reply_id = comment.id;
					if (comment.reply_nickname == '') {
						this.reply_nickname = comment.nickname;
						this.input_placeholder = '回复' + this.reply_nickname;
					} else {
						this.reply_nickname = comment.reply_nickname;
						this.input_placeholder = '回复' + this.reply_nickname
					}

				} else { //发表评论					
					this.input_placeholder = '评论'
				}
			},
			//监听页面滑动关闭输入框
			onPageScroll(e) {
				this.showInput = false;
				this.operate_post_id = "";
				this.focus = false;
				this.inputValue = '';
				this.is_reply = false;
			},
			//检测输入框内容
			sendMessge() {
				if (!this.inputValue) {
					uni.showModal({
						content: "还没有输入内容哦!",
						showCancel: false
					})
					return false;
				}
			},
			// 发送评论文字
			send_comment() {
				this.sendMessge();
				if (this.is_reply) {
					// var reply_username = this.friend_list[this.index].comment_list[this.comment_index].fu_nickname;
					var comment_content = this.inputValue;
					//回复评论
					replyComment({
						circle_id: this.post_id,
						reply_id: this.reply_id,
						content: comment_content
					}).then(res => {
						if (res.code == 1) {
							let replydata = {
								"id": res.data.info.id,
								"circle_id": res.data.info.circle_id,
								"user_id": 0,
								"createtime": null,
								"content": res.data.info.content,
								"reply_id": res.data.info.reply_id,
								"replytime": res.data.info.replytime,
								"reply_user_id": res.data.info.reply_user_id,
								"ip": res.data.info.ip,
								"status": 1,
								"addr": "",
								"nickname": this.reply_nickname,
								"reply_nickname": this.userInfo.nickname,
								"avatar": this.userInfo.avatar,
							}
							this.friend_list[this.index].comment_list.push(replydata)
						}
					})
				} else {
					//发布评论
					var comment_content = this.inputValue;
					submitComment({
						circle_id: this.post_id,
						content: comment_content,
						province_id: this.province_id
					}).then(res => {
						if (res.code == 1) {
							//模拟数据添加
							let mockdata = {
								"id": res.data.info.id,
								"circle_id": res.data.info.circle_id,
								"user_id": res.data.info.user_id,
								"createtime": res.data.info.createtime,
								"content": res.data.info.content,
								"reply_id": 0,
								"replytime": null,
								"reply_user_id": 0,
								"ip": res.data.info.ip,
								"status": 1,
								"addr": "",
								"nickname": this.userInfo.nickname,
								"avatar": this.userInfo.avatar,
							}
							this.friend_list[this.index].comment_list.push(mockdata)
						}
					})
				}
				this.init_input();
				this.inputValue = ''; //清空上次输入的内容
			},
			init_input() {
				this.showInput = false;
				this.focus = false;
				this.is_reply = false;
			},
			//处理长按事件
			gotouchstart(comment, post) {
				let that = this;
				if (comment.user_id != 0) {
					that.deluser_id = comment.user_id;
				}
				if (comment.reply_user_id != 0) {
					that.deluser_id = comment.reply_user_id;
				}
				that.pouser_id = post.user_id;
				that.del_id = comment.id;
				that.cpoy_text = comment.content;
				clearTimeout(timeOutEvent); //清除定时器
				timeOutEvent = 0;
				timeOutEvent = setTimeout(() => {
					//执行长按要执行的内容
					that.is_press = true;
					this.$refs.circle_popup.open();
				}, 500); //这里设置定时
			},
			//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
			gotouchend() {
				clearTimeout(timeOutEvent);
				if (timeOutEvent != 0) {
					//这里写要执行的内容（尤如onclick事件）
					
				}
			},
			//弹窗关闭
			changcircle_popup(e){
				console.info("e",e);
				if(!e.show){
					this.is_press = false;
				}
			},
			//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
			gotouchmove() {
				clearTimeout(timeOutEvent); //清除定时器
				timeOutEvent = 0;
			},
			// 删除评论
			del() {
				var that = this
				that.$refs.circle_popup.close();
				that.$showModal({
					title: '温馨提示',
					concent: '您确定要删除这条评论吗？',
					confirmVal: '确定',
					cancelVal: '取消',
				}).then(res => {
					del({
						comment_id: that.del_id
					}).then(res => {
						if (res.code == 1) {
							that.$api.msg(res.msg)
							for (var i = 0; i < that.friend_list.length; i++) {
								for (var j = 0; j < that.friend_list[i].comment_list.length; j++) {
									if (that.friend_list[i].comment_list[j].id == that.del_id) {
										that.friend_list[i].comment_list.splice(Number(j), 1);
										return
									}
								}
							}
						}
					})
				}).catch(err => {

				})
			},
			//复制
			tocopy() {
				uni.setClipboardData({
					data: this.cpoy_text, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						});
						this.$refs.circle_popup.close();
					}
				});
			},
			tolike(item) {
				like({
					circle_id: item.id
				}).then(res => {
					if (res.code == 1) {

					}
				})
			},
			tocomment(post) {
				// uni.navigateTo({
				// 	url: `/pages/zupu/friend_info/friend_info?id=${post.id}`
				// })
			},
			previewImage(imageList, image_index) {
				let urls = imageList.map((item) => {
					return this.photo_cdn + item;
				})
				uni.previewImage({
					current: image_index,
					urls: urls,
				});
			},
			goPublish() {
				uni.navigateTo({
					url: './publish/publish',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			loadimg(e) {
				console.info("e", e);
			},
			//获取朋友圈列表
			getFriendListfun() {
				this.page++,
					getFriendList({
						page: this.page,
						imuser_id: this.imuser_id
					}).then(res => {
						if (res.code == 1) {
							let datalist = res.data.list;
							datalist = datalist.map((item) => {
								if (item.pics) {
									item.imglist = item.pics.split(",");
								}
								return item;
							})
							this.friend_list = [...this.friend_list, ...datalist];
							if (res.data.list.length == 0) {
								this.isshowall = true;
								if (this.page > 1) {
									this.$api.msg('没有更多了~');
								}
							}
						} else {
							this.isshowall = false;
						}
					})
			},
			getUserinfofun() {
				getUserinfo({
			
				}).then(res=>{
					if(res.code==1){
						this.userInfo = res.data.userinfo;					
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
	@import "./mycircle.scss"
</style>